{extend name="layouts/main" /}
{block name="link"}{/block}
{block name="css"}
<style>
	.layui-form-item {
		margin-bottom: -8px;
	}
	.layui-form-item .layui-input-inline {
		width: 120px;
	    margin-right: 19px;
	}
    .collapse {position: absolute; left: 0; top: calc(40vh - 68px); width: 15px; height: 68px; z-index: 3; }
    .collapse-bg {width: 0; height: 50px; position: absolute; top: 0; left: 0; border-bottom: 9px solid transparent; border-right: none; border-left: 15px solid #009688; border-top: 9px solid transparent; -o-transition: all 0.1s ease,0.1s ease; -ms-transition: all 0.1s ease,0.1s ease; -moz-transition: all 0.1s ease,0.1s ease; -webkit-transition: all 0.1s ease,0.1s ease; }
    .collapse:hover .navbar-collapse{left: 3px;}
    .collapse:hover .collapse-bg{border-bottom: 9px solid transparent; border-left: 20px solid #009688; border-top: 9px solid transparent; }
    .navbar-collapse {width: 15px; left: 0; height: 68px; position: relative; text-align: center; cursor: pointer; }
    .navbar-collapse>span {color: #fff; font-size: 14px; line-height: 68px; vertical-align: text-top; }
    #left-sider{padding:0 10px;    -webkit-transition: width .2s ease;transition: width .2s ease;}
    #right-box{padding:0 10px;}
    #left-sider.hidden{width: 0;padding: 0;    overflow: hidden;}
</style>
{/block}
{block name="content"}
<div class="collapse">
    <div class="collapse-bg"></div>
    <div class="navbar-collapse" >
        <span class="layui-icon layui-icon-spread-left"></span>
    </div>
</div>
<div class="layui-row" style="padding: 15px;background-color: #F2F2F2;">
    <div class="layui-col-md2 layui-col-sm12" id="left-sider">
        <div class="layui-card">
            <div class="layui-card-header">栏目列表</div>
            <div class="layui-card-body" style="height:650px">
                <iframe name="left" id="iframe_categorys" src="{:url('admin/cms.Document/arctype')}" style="height: 100%; width: 100%;" frameborder="0" scrolling="auto"></iframe>
            </div>
        </div>
    </div>
    <div class="layui-col-md10 layui-col-sm12" id="right-box">
        <div class="layui-card">
            <div class="layui-card-header">内容管理</div>
            <div class="layui-card-body" style="height:650px">
                <iframe name="right" id="iframe_categorys_list" src="{:url('admin/cms.Document/panl')}" style="height: 100%; width:100%;border:none;" frameborder="0" scrolling="auto"></iframe>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
$('.collapse').on("click", function() {
    var t = $(this).find('.layui-icon');
    $('#left-sider').toggleClass("hidden");
    if ($('#left-sider').hasClass("hidden")) {
        t.attr("class", "layui-icon layui-icon-shrink-right");
        $("#right-box").attr("class", 'layui-col-md12 layui-col-sm12');
    } else {
        t.attr("class", "layui-icon layui-icon-spread-left");
        $("#right-box").attr("class", 'layui-col-md10 layui-col-sm12');
    };
})
</script>
{/block}